<!DOCTYPE html>
<html>
<head>
    <title>vue列表</title>
    <#include "/header.html">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/vue.css">
</head>
<body>
<div id="rrapp" v-cloak>
    <div class="grid-btn">
        <router-link to="/foo"><el-button type="danger" icon="el-icon-setting">路由一</el-button></router-link>
        <router-link to="/bar"><el-button type="primary" icon="el-icon-delete">路由二</el-button></router-link>
    </div>
    <transition name="slide-fade">
        <router-view></router-view>
    </transition>

</div>

<script src="${request.contextPath}/statics/js/modules/sys/vue.js?_${.now?long}"></script>
<script type="text/x-template" id="tableTemplate">
    <!--<div>A custom component!</div>-->
    <div>
        <el-table
                ref="multipleTable"
                :data="tableData"
                highlight-current-row
                @selection-change="handleCurrentChange"
                style="width: 100%"
                :default-sort = "{prop: 'date', order: 'descending'}">
            <el-table-column type="selection" width="50" >

            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>
            <el-table-column
                    property="examName"
                    label="考试名称"
                    sortable
                    width="220">
            </el-table-column>
            <el-table-column
                    property="userName"
                    label="姓名"
                    width="120">
            </el-table-column>
            <el-table-column
                    property="identity"
                    label="身份证号"
                    width="200">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="currentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="10"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" style="margin-top: 5px; float: right">
        </el-pagination>
        <div style="margin-top: 20px">
            <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>
            <el-button @click="setCurrent()">取消选择</el-button>
        </div>
    </div>
</script>
<script type="text/x-template" id="BTemplate">
    <div>B custom component!</div>
</script>
</body>
</html>